/*
 * $Off Canvas
 *
 */

@media (max-width: @screen-xs-max) {
    html, body {
        height: 100%;
    }
    .off-canvas {
        overflow: hidden;
    }
    .app {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .app.move-right,
    .app.move-left {
        .main-content .fffix {
            position: static;
        }
    }
    .layout {
        -webkit-backface-visibility: hidden;
        position: relative;
        width: 100%;
        .transition(transform 300ms ease 0s);
    }
    .layout:before,
    .layout:after {
        content: " ";
        display: table;
    }
    .layout:after {
        clear: both;
    }
    .canvas-left {
        -webkit-backface-visibility: hidden;
        width: @sidebar-width-sm;
        overflow: hidden;
        box-sizing: content-box;
        -webkit-overflow-scrolling: touch;
        .translate(-100%, 0);
        .translate3d(-100%, 0, 0);
        position: absolute;
        top: 50px;
        bottom: 0;
        left: 0;
    }
    .canvas-right {
        -webkit-backface-visibility: hidden;
        width: @sidebar-width-sm;
        overflow: hidden;
        box-sizing: content-box;
        -webkit-overflow-scrolling: touch;
        .translate(100%, 0);
        .translate3d(100%, 0, 0);
        position: absolute;
        top: 50px;
        bottom: 0;
        right: 0;
    }
    .ios .canvas-left,
    .ios .canvas-right {
        position: fixed;
    }

    .move-left > .layout {
        .translate(@sidebar-width-sm, 0);
        .translate3d(@sidebar-width-sm, 0, 0);
        .transition(transform 300ms ease);
    }
    .move-right > .layout {
        .translate(-@sidebar-width-sm, 0);
        .translate3d(-@sidebar-width-sm, 0, 0);
        .transition(transform 300ms ease);
    }
    .off-canvas > .layout {
        position: absolute;
        top: 0;
        bottom: 0;
        overflow: visible!important;
    }
    .no-csstransforms .canvas-left {
        left: -@sidebar-width-sm;
    }
    .no-csstransforms .canvas-right {
        right: -@sidebar-width-sm;
    }
    .no-csstransforms .move-right > .layout {
        right: @sidebar-width-sm;
    }
    .no-csstransforms .move-left > .layout {
        left: @sidebar-width-sm;
    }
    .move-left .site-overlay,
    .move-right .site-overlay {
        -webkit-backface-visibility: hidden;
        cursor: pointer;
        display: block;
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}